<template>
    <div>
        <el-button class="upload-btn" type="primary" @click="selectFile">{{uploadTile}}
            <i class="upload-li el-file-upload el-file--left"></i>
        </el-button>

        <input :id="inputId+'-file'" ref="file" class="fileInput" type="file" v-on:change="uploadSource()" />

    </div>
</template>

<script>
    export default {
        name: "FileIcon",
        //暴露出可配置的属性
        props:{
            //暴露按钮标题
            uploadTile:{
                default:'上传文件'
            },
            //暴露页面中的inputId
            inputId:{
                default:'upload-source'
            },
            //暴露页面传入的文件类型
            suffixType:{
                default:[]
            },
            //暴露接收uniId
            uniId:{
                default:''
            },
            //接收枚举类型
            useType:{
                default:''
            },
            //回调函数，组件中没有employee对象
            afterUpload:{
                type:Function,
                default: null
            }
        },
        data:function () {
            return{}
        },
        methods:{
            selectFile(){
                //trigger：联动input按钮点击
                console.log("进入方法？")
                $("#"+this.inputId+"-file").trigger("click");
            },
            uploadSource(){
                //表单方式提交数据
                let formData=new window.FormData();
                //通过别名获取file，不需要id
                let file=this.$refs.file.files[0];
                //file类型判断["jpg","jpeg","png","gif"]
                let suffixType=this.suffixType;
                let fileName=file.name;
                //查询到包含.的索引位置+1，substring提取字符串中介于两个指定下标之间的字符,length-(indexof+1) 转换为小写
                let suffix=fileName.substring(fileName.lastIndexOf(".")+1,fileName.length).toLowerCase();
                //定义后缀校验变量
                let validateSuffix=false;
                //循环后缀类型
                for(let i=0;i<suffixType.length;i++){
                    if(suffixType[i].toLowerCase()===suffix){
                        validateSuffix=true;
                        break;
                    }
                }
                if(!validateSuffix){
                    toast.warning("文件格式不正确，只支持上传："+suffixType.join(",")+"文件");
                    //在拦截后，避免onchange事件不触发，需要清空id标签
                    $("#"+this.inputId+"-file").val("");
                    return;
                }
                //获取input中选择file
                console.log('上传的File：',file);
                //key和后端请求的参数名一致
                formData.append('file',file);
                formData.append('moduleId',this.uniId);
                formData.append('useType',this.useType);
                console.log("接收到父组件传入的uniId：",this.uniId);
                Loadings.show();
                this.$axios.post(process.env.VUE_APP_SERVER + '/source/admin/upload/icon',formData)
                    .then((response)=>{
                        Loadings.hide();
                        let resp=response.data;
                        //将获取的resp放入回调，传到页面
                        this.afterUpload(resp);
                        console.log("组件发送到页面的resp图片地址：",resp.responseData);
                        //避免on-change事件在第二次相同类型点击后，不触发，将id对应标签设置为空
                        $("#"+this.inputId+"-file").val("");
                    });
            },
        }
    }
</script>

<style scoped>
    .fileInput{
        margin-left: -300px;
        color: white;
        z-index: -1;
    }
    .upload-btn{
        float: left;
        margin-right: 100%;
        margin-bottom: 10px;
        padding: 8px 8px;
    }
    .upload-li{
        font-size: 20px;
    }

</style>